<template>
  <!-- 订单管理页 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="1" />
      <el-tab-pane label="待支付" name="2" />
      <el-tab-pane label="待派单" name="3" />
      <el-tab-pane label="待接单" name="4" />
      <el-tab-pane label="待服务" name="5" />
      <el-tab-pane label="待确认" name="6" />
      <el-tab-pane label="已完成" name="7" />
    </el-tabs>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <!-- 订单编号 -->
        <el-table-column prop="id" label="订单编号" align="center" />
        <!-- 下单时间 -->
        <el-table-column prop="orderTime" label="下单时间" align="center">
          <template slot-scope="scope">
            <span> {{ turnTime(scope.row.orderTime) }} </span>
          </template>
        </el-table-column>
        <!-- 总价 -->
        <el-table-column label="总价" align="center">
          <template slot-scope="scope">
            <span>￥ </span><span style="color: #f56c6c; font-size: 20px">{{
              scope.row.total
            }}</span><span> 元</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == '待服务'"
              type="info"
              size="small"
            >待服务</el-button>
            <el-button
              v-if="scope.row.status == '已完成'"
              type="info"
              size="small"
            >已完成</el-button>
            <el-button
              v-if="scope.row.status == '待派单'"
              type="success"
              size="small"
            >待派单</el-button>
            <el-button
              v-if="scope.row.status == '待接单'"
              type="warning"
              size="small"
            >待接单</el-button>
            <el-button
              v-if="scope.row.status == '待确认'"
              type="warning"
              size="small"
            >待确认</el-button>
          </template>
        </el-table-column>
        <!-- 顾客ID -->
        I
        <el-table-column prop="customerId" label="顾客ID" align="center" />
        <!-- 员工ID -->
        <el-table-column prop="employeeId" label="员工ID" align="center" />
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: #606266"
              @click="xq(scope.row.id)"
            >详情</el-button>
            <el-button
              v-if="scope.row.status == '待派单'"
              type="text"
              @click="distributeLeaflets(scope.row.id)"
            >派单</el-button>
            <el-button
              v-if="scope.row.status == '待接单'"
              type="text"
              style="color: #e6a23c"
              @click="cancelSendOrder(scope.row.id)"
            >取消派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginetion">
      <el-pagination
        :current-page="pageQuery.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="pageQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="派单" :visible.sync="dialogVisible" width="30%">
      <el-radio-group v-model="staff">
        <el-radio
          v-for="(staffInfo, index) in staffData"
          :key="index"
          :label="staffInfo.id"
          border
        >{{ staffInfo.username }}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get } from '@/utils/request'
import moment from 'moment'
export default {
  data() {
    return {
      activeName: '1',
      pageQueryForm: {
        page: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: [],
      // 查询后返回订单数量
      total: 0,
      // 员工表格
      staffData: [],
      // 员工
      staff: null,
      // 派单表单
      sendOrder: {},
      // 模态框显示
      dialogVisible: false
    }
  },
  computed: {},
  created() {
    this.pageQuery()
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.pageQueryForm.page = 1
      this.pageQueryForm.pageSize = 10
      // console.log(tab.index);
      switch (this.activeName) {
        case '2':
          this.pageQueryForm.status = '待支付'
          break
        case '3':
          this.pageQueryForm.status = '待派单'
          break
        case '4':
          this.pageQueryForm.status = '待接单'
          break
        case '5':
          this.pageQueryForm.status = '待服务'
          break
        case '6':
          this.pageQueryForm.status = '待确认'
          break
        case '7':
          this.pageQueryForm.status = '已完成'
          break
        default:
          this.pageQueryForm = {
            page: 1,
            pageSize: 10
          }
          break
      }
      this.pageQuery()
    },
    // 查询订单数据
    async pageQuery() {
      let res = await get('/order/pageQuery', { ...this.pageQueryForm })
      this.total = res.data.total
      this.tableData = res.data.list
    },
    // 取消派单
    async cancelSendOrder(id) {
      let res = await get('/order/cancelSendOrder', { orderId: id })
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
      }
      this.pageQuery()
    },
    // 打开模态框派单
    distributeLeaflets(id) {
      this.sendOrder.orderId = parseInt(id)
      this.getroleIdALL()
      this.dialogVisible = true
    },
    // 派单
    async pd() {
      this.sendOrder.waiterId = parseInt(this.staff)
      let res = await get('/order/sendOrder', this.sendOrder)
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.dialogVisible = false
        this.pageQuery()
      }
    },
    // 查看详情
    xq(id) {
      // 跳转传参
      this.$router.push({
        // 跳转的路由路径
        path: '/admin/order/Details',
        // 想要传递的参数 使用query对象的形式进行传递
        query: {
          id
        }
      })
    },
    // 获取所有员工
    async getroleIdALL() {
      let data = {
        page: 1,
        pageSize: 50,
        roleId: 1
      }
      let res = await get('/baseUser/pageQuery', data)
      this.staffData = res.data.list
    },
    // 控制每页条数的
    handleSizeChange(val) {
      this.pageQueryForm.pageSize = val
      this.pageQuery()
    },
    // 修改前页显示的页数
    handleCurrentChange(val) {
      this.pageQueryForm.page = val
      this.pageQuery()
    },
    getTimestamp(time) {
      // 把时间日期转成时间戳 方法
      return new Date(time).getTime()
    },
    turnTime(date) {
      // 把时间戳转成时间日期 方法
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style scoped>
.paginetion {
  float: right;
}
</style>
